<!-- 优惠券 组件 -->
<template>
	<view class="my-coupon-box">
		<!-- 目前优惠券的 status 只有 === 3 时才会显示为灰色样式，意为 已过期 -->
		<view class="coupon-money" :class="[data.status === 3 ? 'is-true' : '']">
			<view>
				￥
				<text style="font-size: 60rpx">{{ data.price || 0 }}</text>
			</view>
			<view class="u-line-1">{{ data.tip_text || '限时抢购' }}</view>
		</view>
		<view class="date-box" :class="[data.status === 3 ? 'data-is-true' : '']">
			<view class="tip">满{{ data.allow_price || '任意金额均' }}可用</view>
			<view>有效期至：{{ data.end_time || '' }}</view>
			<view class="shop u-line-1" v-if="!isShop || data.shop_name">可用店铺：{{ data.shop_name || '' }}</view>
		</view>
		<!-- 假设：data.coupon_type 为 0 则优惠券未领取，为 1 则未使用，为 2 则已使用，为 3 则已过期 -->
		<block v-if="isShop"><view class="btn-box" @click="receiveClick">提前下架</view></block>
		<view :class="[data.status === 3 ? 'btn-is-true' : '']" @click="receiveClick" v-else>
			<view class="btn-box" v-if="state === 0">领取</view>
			<view class="btn-box" v-else-if="state === 1">{{ useText }}</view>
			<view class="icon-box" v-else-if="state === 2"><u-icon name="yishiyong" custom-prefix="custom-icon" size="160" color="rgba(255, 46, 46, 0.6)"></u-icon></view>
			<view class="icon-box" v-else-if="state === 3"><u-icon name="yiguoqi" custom-prefix="custom-icon" size="160" color="rgba(255, 46, 46, 0.6)"></u-icon></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-coupon-item',
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		// 订单状态，0 待领取、1 已领取、2 已使用、3 已过期
		state: {
			type: [String, Number],
			default: 0
		},
		isShop: {
			type: Boolean,
			default: false
		},
		useText: {
			type: String,
			default: '去使用'
		}
	},
	data() {
		return {
			/* data: {
				id: 1,
				money: '20',
				type: '全店通用',
				limit: '满200元可用',
				valid_date: '2021-12-21 12:32',
				// 假设：coupon_type 为 0 则优惠券未领取，为 1 则未使用，为 2 则已使用，为 3 则已过期
				coupon_type: 0,
			} */
		};
	},
	methods: {
		receiveClick() {
			this.$emit('click', this.data.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.my-coupon-box {
	width: 690rpx;
	height: 190rpx;
	display: flex;
	align-items: center;
	position: relative;
	margin: 0 auto 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	.coupon-money {
		width: 200rpx;
		height: 100%;
		position: relative;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #ffffff;
		background: $color;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&::after {
			content: '';
			position: absolute;
			top: 0px;
			right: -5px;
			width: 10px;
			height: 100%;
			background: radial-gradient(circle, $color, $color 4px, transparent 5px);
			background-size: 10px 10px;
		}
	}
	.is-true {
		background: #c9c9c9;
		&::after {
			content: '';
			position: absolute;
			top: 0px;
			right: -5px;
			width: 10px;
			height: 100%;
			background: radial-gradient(circle, #c9c9c9, #c9c9c9 4px, transparent 5px);
			background-size: 10px 10px;
		}
	}
	.date-box {
		width: 100%;
		height: 100%;
		padding-left: 30rpx;
		background: linear-gradient(90deg, #c8efdb, #f9fdfb);
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #5f5f6b;
		.tip {
			font-size: 30rpx;
			font-weight: bold;
			color: #111111;
			margin-bottom: 10rpx;
		}
		.shop {
			font-size: 24rpx;
			font-weight: bold;
			color: #111111;
			margin-top: 10rpx;
		}
	}
	.data-is-true {
		background: linear-gradient(90deg, #dddddd, #ffffff);
	}
	.btn-box {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 26rpx;
		width: 58rpx;
		max-height: 150rpx;
		overflow: hidden;
		background: #32c57b;
		border-radius: 29rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #ffffff;
		text-align: center;
		padding: 19rpx 10rpx;
		line-height: 1em;
	}
	.btn-is-true {
		background: #d1d1d1;
	}
	.icon-box {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10rpx;
	}
}
</style>
